<template>
  <div class="addSystemBtn">
    <el-button type="primary" size="small"  icon="el-icon-edit" @click="drawer=true">新增</el-button>
    <el-drawer
        title="新增系统"
        :size="800"
        :wrapperClosable="false"
        :destroy-on-close="true"
        :visible.sync="drawer">
      <systemForm ref="systemForm"></systemForm>
      <div class="btnBox">
        <el-button type="info" plain style="margin-right: 30px"  @click="drawer = false">取消</el-button>
        <el-button type="primary" style="margin-right: 20px" @click="addSystem">确定</el-button>

      </div>
    </el-drawer>
  </div>
</template>

<script>
import systemForm from "@/views/APImanage/module/systemForm";
export default {
  name: "addSystemBtn",
  components:{
    systemForm
  },
  methods:{
    addSystem(){
      this.$refs.systemForm.getData().then(data=>{
        this.$api.addSystem(data).then(res=>{
          this.$message.success('新增成功')
          this.drawer = false
          this.$emit('after-op')
        })
      })
    },
  },
  data(){
    return {
      drawer:false
    }
  },
}
</script>

<style scoped lang="less">
.btnBox{
  display: flex;
  flex-direction: row-reverse;
}
</style>